<%--
  Created by IntelliJ IDEA.
  User: yingzi
  Date: 2017-6-20
  Time: 13:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="/static/commonviews/header.jsp"/>
    <link type="text/css" rel="stylesheet" href="video/css/jplayer.blue.monday.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div id="jp_container_1" class="jp-audio" style="margin: 20px;" role="application" aria-label="media player">
                <div class="jp-type-single">
                    <div class="jp-gui jp-interface">
                        <div class="jp-controls">
                            <button class="jp-play" role="button" tabindex="0">play</button>
                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                        </div>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                        </div>
                        <div class="jp-time-holder">
                            <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                            <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                            <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                            </div>
                        </div>
                    </div>
                    <div class="jp-details">
                        <div class="jp-title" aria-label="title">&nbsp;</div>
                    </div>
                    <div class="jp-no-solution">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your
                        <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                    </div>
                </div>
            </div>
        </div>
        <!--文件列表-->
        <div class="col-md-6">
            <div id="jquery_jplayer_2" class="jp-jplayer"></div>
            <div id="jp_container_2" class="jp-audio" style="margin: 20px;" role="application" aria-label="media player">
                <div class="jp-type-playlist">
                    <div class="jp-gui jp-interface">
                        <div class="jp-controls">
                            <button class="jp-previous" role="button" tabindex="0">previous</button>
                            <button class="jp-play" role="button" tabindex="0">play</button>
                            <button class="jp-next" role="button" tabindex="0">next</button>
                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                        </div>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                        </div>
                        <div class="jp-time-holder">
                            <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                            <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                            <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                        </div>
                    </div>
                    <div class="jp-playlist">
                        <ul>
                            <li>&nbsp;</li>
                        </ul>
                    </div>
                    <div class="jp-no-solution">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="video/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="video/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
        //单个播放器
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    title: "音乐播放器",
                    mp3: "video/file/天空之城.mp3"
                });
            },
            swfPath: "video/file",//定义jPlayer 的Jplayer.swf文件的路径，支持IE8
            solution: "flash, html",//定义html和flash解决方案的优先级。默认优先使用html，flash备用
            supplied: "mp3",//音频格式，支持mp3,m4a
            fullWindow:false,//设置全窗口模式的初始状态
            volume:0.8,//定义从0到1的初始音量值
            wmode: "window",//允许设置Flash 的wmode。 有效的wmode值有: window, transparent, opaque, direct, gpu
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,//启用这个实例的键盘控制器特性
            remainingDuration: true,
            toggleDuration: true
        });

        //文件播放列表
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_2",
            cssSelectorAncestor: "#jp_container_2"
        }, [
            {
                title:"天空之城1",
                mp3: "video/file/天空之城.mp3"
            },
            {
                title:"天空之城2",
                mp3: "video/file/天空之城.mp3"
            }
        ], {
            swfPath: "video/file",
            supplied: "mp3",
            wmode: "window",
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true
        });
    });
    //]]>
</script>
</body>
</html>
